<template>
  <PublicLoading v-if="loading.mounted" />
  <div class="dt-main-tabs-content" v-else>
    <div class="dt-content-left">
      <keep-alive> <PcComGroupList @getGroupInfo="getGroupInfo" ref="groupList" /><!--群聊列表--> </keep-alive>
    </div>
    <div class="dt-content-main">
      <div class="dt-content-head">
        <div class="dt-content-head-tab">
          <div class="dt-head-title">
            <div class="dt-detail-title">{{ currGroupName }}</div>
          </div>
          <div class="dt-head-right" v-if="isGroup && !isDel">
            <!-- 群组织架构 -->
            <i class="dt-icon-organi" v-if="isShowOrgLink" @click="goChatOrg"></i>
            <!-- 添加和删除群成员 -->
            <el-dropdown trigger="click" v-if="userRole == 1 || userRole == 2" @command="handleCommand">
              <i class="dt-icon-Member"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="addMember">邀请成员</el-dropdown-item>
                <el-dropdown-item command="delMember">删除成员</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

            <!-- 群更多选项 -->
            <i class="dt-icon-more" @click="showMoreButton" ref="showMoreButton"></i>
          </div>
        </div>
      </div>
      <div class="dt-content-page dt-chat-talk por" v-if="isGroup">
        <!--群聊-->
        <div class="dt-content-page-main por">
          <PcComChatPanel
            @changeRules="changeRules"
            @appendAtuser="appendAtuser"
            @appendPrivate="appendPrivate"
            @shortcutMenuOffEvent="shortcutMenuOff"
            @appendReceipt="appendReceipt"
            ref="ChatPanel"
          />
          <!--聊天面板-->
          <PcComChatInput @anchorPointEvent="goAnchorPoint" :totalGroup="totalGroup" :groupType="groupType" :groupUid="groupUid" ref="ChatInput" />
          <!--聊天输入框-->
        </div>
        <div class="dt-content-page-aside">
          <PcComChatMember
            v-show="!isShowMoreBox"
            @childShortcutMenuEvent="childShortcutMenu"
            @groupInfo="groupInfo"
            @groupMember="groupMember"
            @getGroupList="getGroupList"
            ref="ChatMember"
          />
          <!--群成员-->
          <PcComChatMore
            v-show="isShowMoreBox"
            :groupInfo="groupInfoData"
            :groupMember="groupMemberData"
            @setGroupName="setGroupName"
            ref="ChatMore"
          />
          <!-- 私域聊天群更多选项 -->
        </div>
      </div>
      <div class="dt-content-page" v-if="isNotice">
        <!--通知-->
        <PcComChatNotice @getGroupList="getGroupList" />
      </div>
      <div class="dt-content-page" v-if="!groupId">
        <div class="dt-chat-notalk"><img src="/skb/img/logo-gray.png" alt="" /></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: { mounted: false },
      uid: this.$tools.getDecrypt(this.$store.state.uid),
      groupName: '',
      groupUid: '',
      groupType: 0,
      groupLevel: 0,
      userRole: 0,
      isDel: 0,
      userCount: '',
      totalGroup: 0,
      groupUid: 0,
      isShowMoreBox: false,
      currentGroupId: '',
      groupInfoData: {},
      groupMemberData: []
    }
  },
  watch: {
    groupId(newValue, oldValue) {
      // console.log('groupId name changed from', oldValue, 'to', newValue)
      this.currentGroupId = newValue
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    },
    groupId() {
      return this.query.groupId
    },
    isGroup() {
      return this.groupId && this.groupId !== '0'
    },
    isNotice() {
      return this.groupId && this.groupId === '0'
    },
    isShowOrgLink() {
      return this.isGroup && this.groupType === 1 && this.groupLevel === 1 //&& this.groupUid + '' === this.uid
    },
    currGroupName() {
      return this.groupId === '0' ? '系统通知' : this.groupId ? this.groupName + '（' + this.userCount + '）' : ''
    }
  },
  methods: {
    showMoreButton() {
      this.isShowMoreBox = !this.isShowMoreBox
    },
    handleCommand(command) {
      if (command === 'addMember') {
        this.$refs.ChatMember.isShowInvite()
      } else if (command === 'delMember') {
        this.$refs.ChatMember.isShowDelet()
      }
    },
    //查看高级群组织架构
    goChatOrg() {
      this.$router.push('/main/#/pc?tab=org&elTab=1&groupId=' + this.groupId)
    },
    shortcutMenuOff() {
      this.$refs.ChatMember.shortcutMenuOff()
    },
    goAnchorPoint(item) {
      this.$refs.ChatPanel.goBack(item, 'undefined', '3')
    },
    childShortcutMenu(item) {
      // item.type 1、2、3(@/悄悄话/回执)  无(个人主页)
      if (item.type == 1) {
        this.$refs.ChatInput.appendAtuser('member', item.userId, item.userName)
      } else if (item.type == 2) {
        this.$refs.ChatInput.appendPrivate('member', item.userId, item.userName)
      } else if (item.type == 3) {
        this.$refs.ChatInput.appendReceipt('member', item.userId, item.userName)
      } else {
        this.$refs.ChatPanel.panelShortcutMenuOff()
      }
    },
    changeRules() {
      this.$refs.ChatMember.chatRulesShow()
    },
    appendAtuser(type, userId, userName) {
      this.$refs.ChatInput.appendAtuser(type, userId, userName)
    },
    appendPrivate(type, userId, userName) {
      this.$refs.ChatInput.appendPrivate(type, userId, userName)
    },
    appendReceipt(type, userId, userName) {
      this.$refs.ChatInput.appendReceipt(type, userId, userName)
    },
    getGroupList() {
      this.$refs.groupList.getGroupList()
    },
    // 获取群信息
    groupInfo(data) {
      this.userRole = data.userRole
      this.groupName = data.groupName
      this.groupType = data.groupType
      this.groupLevel = data.groupLevel
      this.isDel = data.isDel
      this.groupUid = data.groupUid
      this.totalGroup = data.totalGroup
      this.groupUid = data.groupUid
      // console.log('groupInfo', data)
      this.groupInfoData = data
    },
    getGroupInfo() {
      this.$refs.ChatMember.getChatRules()
    },
    groupMember(data) {
      // console.log('groupMember', data)
      this.userCount = data.length
      this.groupMemberData = data
    },
    setGroupName(name) {
      this.groupName = name
      this.$refs.groupList.getGroupList()
    }
    // sendMess() {
    //   this.$refs.ChatPanel.handleScrollBottom()
    // }
  },
  mounted() {
    $(document).on('click contextmenu', (event) => {
      // console.log('document click', event.target)
      if (
        this.isShowMoreBox &&
        !event.target.closest('.dt-icon-more') &&
        !event.target.closest('.dt-talk-memore') &&
        !event.target.closest('.el-dialog__wrapper')
      ) {
        this.isShowMoreBox = false
      }
    })
    this.currentGroupId = this.groupId
  },
  beforeDestroy() {
    this.$socket.emit('leaveGroup', 'group-' + this.currentGroupId)
  }
}
</script>
<style scoped>
.dt-head-right {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.dt-head-right i {
  display: block;
  margin-left: 8px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.dt-head-right .dt-icon-organi {
  background: url(/skb/img/chat/ic_jg28-normal.png) no-repeat center;
}
.dt-head-right .dt-icon-organi:hover {
  background: url(/skb/img/chat/ic_jg28-select.png) no-repeat center;
}
.dt-head-right .dt-icon-Member {
  background: url(/skb/img/chat/ic_cygl28-normal.png) no-repeat center;
}
.dt-head-right .dt-icon-Member:hover {
  background: url(/skb/img/chat/ic_cygl28-hover.png) no-repeat center;
}
.dt-head-right .dt-icon-more {
  background: url(/skb/img/chat/ic_more28-normal.png) no-repeat center;
}
.dt-head-right .dt-icon-more:hover {
  background: url(/skb/img/chat/ic_more28-hover.png) no-repeat center;
}
.dt-content-page {
  flex-direction: row;
  background-color: transparent;
}
.dt-content-page.dt-chat-talk {
  margin: 0;
}
.dt-content-page-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  margin-right: -318px;
}
.dt-content-page-aside {
  /* border-left: 1px solid #e1e6f0; */
  display: flex;
  width: 280px;
  padding-left: 318px;

  /* flex-direction: column; */
  background-color: #fff;
  overflow: auto;
}
.dt-chat-notalk {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f2f3f5;
  justify-content: center;
  align-items: center;
}
.dt-chat-notalk img {
  width: 96px;
  height: 96px;
}
</style>
